<template>
	<div class="box-container">
		
	</div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref([
	{
		title: 'Item 1',
		content: 'Content for item 1',
		date: '2023-10-01'
	},
	{
		title: 'Item 2',
		content: 'Content for item 2',
		date: '2023-10-02'
	},
	{
		title: 'Item 3',
		content: 'Content for item 3',
		date: '2023-10-03'
	}
]);
</script>

<style scoped>
.timeline-head {
	text-align: center;
	font-size: 16px;
	font-weight: bold;
	color: #2a9d8f;
}
.itemline-card {
	background-color: #fff;
	border-radius: 8px;
	padding: 16px;
	box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
	margin-bottom: 16px;
	width: 500px;
}
.itemline-card h3 {
	margin: 0;
	font-size: 18px;
	color: #333;
}
.itemline-card h3:hover {
	color: #00a0cc;
	cursor: pointer;
}
.itemline-card p {
	margin: 8px 0 0;
	font-size: 14px;
	color: #666;
}
.itemline-card:hover {
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
	transition: box-shadow 0.3s ease;
}
</style>